<template>
  <a-modal
      :title="title"
      :width="1000"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="停车场编号"
            v-show="false"
        >
          <a-input placeholder="请输入停车场编号" v-decorator="['parkCode', {initialValue:this.parkCode}]"/>
        </a-form-item>
        <a-row style="border-width: 1px;border-color: rgb(205 205 205);border-style: solid;border-radius: 5px">
          <!--停车场基本信息-->
          <a-row
              style="height: 180px;border-bottom-width: 1px;border-bottom-color: rgb(205 205 205);border-bottom-style: solid;">
            <a-col align="center" :span="4"
                   style="height: 100%;border-right-width: 1px;border-right-color: rgb(205 205 205);border-right-style: solid ">
              <p style="font-weight: 500;font-size: 15px;height: 100%;margin-bottom: 0px;padding:82px 0px">
                停车场基本信息
              </p>
            </a-col>
            <a-col :span="20">
              <a-row>
                <a-col :span="12">
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="停车场名称">
                    <a-input placeholder="请输入停车场名称" v-decorator="['parkName', {rules: [{ type: 'string', required: true, message: '请输入停车场名称!' },{max:100,message:'停车场名称限制在100个字符以内'}],}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="停车场状态">
                    <a-select style="width: 100%"
                              @change="handleChange"
                              v-decorator="['parkStatus', {initialValue:'1'}]"
                              :options="parkStatusOptions"
                              placeholder="请选择停车场状态">
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="停车场联系人电话">
                    <a-input placeholder="请输入停车场联系人电话" v-decorator="['parkTel',{rules: [{ type: 'string', required: true, message: '请输入停车场联系人电话!'},{ validator:this.validateMobile}],}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="停车管理人员">
                    <a-input placeholder="请输入停车管理人员" v-decorator="['parkManger', {rules: [{ type: 'string', required: true, message: '请输入停车场管理人员!'},{max:10,message:'限制在10个字符以内'}],}]"/>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="缴费完成免费分钟">
                    <a-select style="width: 100%"
                              @change="handleChange"
                              v-decorator="['freeMinutes', {initialValue:20}]"
                              :options="parkFreeMinutes"
                              placeholder="请选择缴费完成免费分钟">
                    </a-select>
                  </a-form-item>

                </a-col>
                <a-col :span="12">
                  <a-form-item
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    label="停车场计费规则版本">
                    <a-select style="width: 100%"
                              @change="handleChange"
                              v-decorator="['chargeFeeEdition', {initialValue:0}]"
                              :options="chargeFeeEditionOptions"
                              placeholder="请选择停车场计费规则版本">
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col> <!--停车场基本信息-->
          </a-row>
          <!--停车场位置信息-->
          <a-row
              style="height: 291px;border-bottom-width: 1px;border-bottom-color: rgb(205 205 205);border-bottom-style: solid;">
            <a-col align="center" :span="4"
                   style="height: 100%;border-right-width: 1px;border-right-color: rgb(205 205 205);border-right-style: solid ">
              <p style="font-weight: 500;font-size: 15px;height: 100%;margin-bottom: 0px;padding:136px 0px">
                停车场位置信息
              </p>
            </a-col>
            <a-col :span="20">
              <a-row>
                <a-col :span="12">

                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="停车场经度">
                    <a-input placeholder="请输入停车场经度" v-decorator="['longitude', {rules:[{pattern:new RegExp(/^-?\+?((0|1?[0-7]?[0-9]?)(([.][0-9]{1,4})?)|180(([.][0]{1,4})?))$/),message:'请输入正确格式的经度'}]}]"/>
                  </a-form-item>

                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="省份">
                    <a-input placeholder="请输入省份" v-decorator="['provinceName', {rules:[{max:20,message:'限制在20个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="城市">
                    <a-input placeholder="请输入城市" v-decorator="['cityName', {rules:[{max:20,message:'限制在20个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="区名称">
                    <a-input placeholder="请输入区名称" v-decorator="['areaName', {rules:[{max:20,message:'限制在20个字符以内'}]}]"/>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="停车场维度">
                    <a-input placeholder="请输入停车场维度" v-decorator="['dimension', {rules:[{pattern:new RegExp(/^-?\+?((0|[1-8]?[0-9]?)(([.][0-9]{1,4})?)|90(([.][0]{1,4})?))$/),message:'请输入正确格式的纬度'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="省编码">
                    <a-input placeholder="请输入省编码" v-decorator="['provinceCode', {rules:[{max:10,message:'限制在10个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="市编码">
                    <a-input placeholder="请输入市编码" v-decorator="['cityCode', {rules:[{max:10,message:'限制在10个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="区编码">
                    <a-input placeholder="请输入区编码" v-decorator="['areaCode', {rules:[{max:10,message:'限制在10个字符以内'}]}]"/>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-item
                      :labelCol=" {
                    xs: {span: 12},
                    sm: {span: 4},
                    style: {textAlign: 'left', marginLeft: '20px'},
                  }"
                      :wrapperCol="{
                  xs: {span: 12},
                  sm: {span: 19},
                  style: {textAlign: 'right'}
                  }"
                      label="停车场位置">
                    <a-textarea :auto-size="{ minRows: 2, maxRows: 2 }" style="height: 62px" placeholder="请输入停车场位置"
                                v-decorator="['parkPosition', {rules:[{max:100,message:'停车场未知限制在100个字符以内'}]}]"/>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col> <!--停车场位置信息-->
          </a-row>
          <!--停车场商户信息-->
          <a-row
              style="height: 165px;border-bottom-width: 1px;border-bottom-color: rgb(205 205 205);border-bottom-style: solid;">
            <a-col align="center" :span="4"
                   style="height: 100%;border-right-width: 1px;border-right-color: rgb(205 205 205);border-right-style: solid ">
              <p style="font-weight: 500;font-size: 15px;height: 100%;margin-bottom: 0px;padding:75px 0px">
                停车场商户信息
              </p>
            </a-col>
            <a-col :span="20">
              <a-row>
                <a-col :span="12">
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="商户id">
                    <a-input placeholder="请输入商户id" v-decorator="['merchantId', {rules: [{ type: 'string', required: true, message: '请输入商户id!' },{max:40,message:'商户id限制在40个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="商户名称">
                    <a-input placeholder="请输入商户名称" v-decorator="['merchantName', {rules: [{ type: 'string', required: true, message: '请输入商户名称!' },{max:50,message: '商户名称限制在50个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="商户账号">
                    <a-input placeholder="请输入商户账号" v-decorator="['merchantAcct', {rules: [{ type: 'string', required: true, message: '请输入商户账号!' },{max:50,message: '商户账号限制在50个字符以内'}]}]"/>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item
                          :labelCol="labelCol"
                          :wrapperCol="wrapperCol"
                          label="红包找零 "
                          placeholder="是否支持红包找零">
                    <a-select style="width: 100%" @change="handleChange" :options="redPayStatusOptions"
                              v-decorator="['redPayStatus', {initialValue:'0'}]">
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>

            </a-col>
          </a-row>
          <!--停车场财务信息-->
          <a-row style="height: 340px;">
            <a-col align="center" :span="4"
                   style="height: 100%;border-right-width: 1px;border-right-color: rgb(205 205 205);border-right-style: solid ">
              <p style="font-weight: 500;font-size: 15px;height: 100%;margin-bottom: 0px;padding:160px 0px">
                停车场发票配置信息
              </p>
            </a-col>
            <a-col :span="20">
              <a-row>
                <a-col :span="12">
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="销售方名称">
                    <a-input placeholder="请输入销售方名称" v-decorator="['xsfMc', {rules:[{max:100,message:'销售方名称限制在100个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="销售方地址、电话">
                    <a-input placeholder="请输入销售方地址、电话" v-decorator="['xfsDzdh', {rules:[{max:100,message:'销售方地址、电话限制在100个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="开票类型：">
                    <a-select style="width: 100%"
                              @change="handleChange"
                              v-decorator="['kplx', {initialValue:'0'}]"
                              :options="kplxOptions"
                              placeholder="请选择开票类型">
                    </a-select>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="征税方式 "
                      placeholder="请选择征税方式">
                    <a-select style="width: 100%" @change="handleChange" :options="zsfsOptions"
                              v-decorator="['zsfs', {initialValue:'0'}]">
                    </a-select>
                  </a-form-item>

                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="发票状态">
                    <a-select style="width: 100%"
                              @change="handleChange"
                              v-decorator="['invoiceType', {initialValue:'0'}]"
                              placeholder="请选择发票状态"
                              :options="invoiceTypeOptions"
                    >
                    </a-select>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="发票请求头">
                    <a-input placeholder="请输入发票请求头" v-decorator="['invoiceHead', {rules:[{max:10,message:'发票请求头限制在10个字符以内'}]}]"/>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="销售方纳税人识别号">
                    <a-input placeholder="请输入销售方纳税人识别号" v-decorator="['xsfNsrsbh', {rules:[{max:20,message:'销售方纳税人识别号限制在20个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="销售方银行账号">
                    <a-input placeholder="请输入销售方银行账号" v-decorator="['xsfYhzh', {rules:[{max:100,message:'销售方银行账号限制在100个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="开票人">
                    <a-input placeholder="请输入开票人" v-decorator="['openPerson', {rules:[{max:8,message:'限制在8个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="收款人">
                    <a-input placeholder="请输入收款人" v-decorator="['moneyPerson', {rules:[{max:8,message:'限制在8个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="复核人">
                    <a-input placeholder="请输入复核人" v-decorator="['checkPerson', {rules:[{max:8,message:'限制在8个字符以内'}]}]"/>
                  </a-form-item>
                  <a-form-item
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      label="税率">
                    <a-input placeholder="请输入税率" v-decorator="['taxRate', {rules:[{max:10,message:'限制在10个字符以内'}]}]"/>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-row>

        <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="创建人"
            v-show="false">
          <a-input placeholder="请输入创建人" v-decorator="['createUser', {}]"/>
        </a-form-item>
        <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="更新日期"
            v-show="false">
          <a-date-picker showTime format="YYYY-MM-DD HH:mm:ss" v-decorator="[ 'updateTime', {}]"/>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {httpAction} from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"

export default {
  name: "ParkInfoModal",
  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      labelCol: {
        xs: {span: 12},
        sm: {span: 8},
        style: {textAlign: 'left', marginLeft: '20px'},
      },
      wrapperCol: {
        xs: {span: 12},
        sm: {span: 14},
        style: {textAlign: 'right'}
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: "/parking/parkInfo/add",
        edit: "/parking/parkInfo/edit",
      },
      parkCode: '',
      parkStatusOptions: [{value: '1', label: '正常'}, {value: '2', label: '停止'}],
      parkchargeMode: [{value: '0', label: '场端收费'}, {value: '1', label: '云端收费'}],
      parkFreeMinutes: [{value: 10, label: '10'}, {value: 20, label: '20'}, {value: 30, label: '30'}],
      kplxOptions: [{value: '0', label: '蓝字发票'}, {value: '1', label: '红字发票'}],
      zsfsOptions: [{value: '0', label: '普通征税'}, {value: '1', label: '减按计征'}, {value: '2', label: '差额征税'}],
      invoiceTypeOptions: [{value: '0', label: '未开通'}, {value: '1', label: '国票'}, {value: '2', label: '百旺'}],
      redPayStatusOptions:[{value: '0', label: '未开通'}, {value: '1', label: '微信找零'},  {value: '2', label: '其他第三方找零'}],
      chargeFeeEditionOptions:[{value:0,label:'普通版本'},{value: 1,label:'大小车场模式'},{value: 2,label:'新版月租车'}],
    }
  },
  created() {
  },
  methods: {
    add() {
      this.edit({});
    },
    edit(record) {

      this.form.resetFields();
      if(record!=={})
      {
        if (record.parkStatus === '正常' && record.parkStatus !== '1') {
          record.parkStatus = '1'
        } else if (record.parkStatus === '停用' &&record.parkStatus !== '2') {
          record.parkStatus = '2'

        }
        if (record.chargeMode === '场端收费' && record.chargeMode !== '1') {
          record.chargeMode = '0'
        } else if (record.chargeMode === '云端收费' &&record.chargeMode !== '0') {
          record.chargeMode = '1'
        }
        if (record.invoiceType === '未开通' && record.invoiceType !== '0') {
          record.invoiceType = '0'
        } else if (record.invoiceType !== '1' && record.invoiceType !== '2') {
          if (record.invoiceType === '国票') {
            record.invoiceType = '1'
          }
          if(record.invoiceType ==='百旺'){
            record.invoiceType = '2'
          }
        }
      }
      this.model = Object.assign({}, record);
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'parkCode', 'parkName','chargeMode','freeMinutes', 'parkPosition', 'longitude', 'dimension', 'parkTel', 'parkManger', 'parkStatus', 'provinceCode', 'provinceName', 'cityCode', 'cityName', 'areaCode', 'areaName', 'merchantId', 'merchantName', 'merchantAcct', 'kplx', 'zsfs', 'xsfNsrsbh', 'xsfMc', 'xfsDzdh', 'xsfYhzh', 'invoiceType', 'invoiceHead', 'openPerson', 'moneyPerson', 'checkPerson', 'taxRate', 'createUser','redPayStatus','chargeFeeEdition'))
        //时间格式化
        this.form.setFieldsValue({updateTime: this.model.updateTime ? moment(this.model.updateTime) : null})
      });

    },
    close() {
      this.$emit('close');
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.add;
            method = 'post';
          } else {
            httpurl += this.url.edit;
            method = 'put';
          }

          let formData = Object.assign(this.model, values);

          //时间格式化
          formData.updateTime = formData.updateTime ? formData.updateTime.format('YYYY-MM-DD HH:mm:ss') : null;
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    handleChange(value) {
    },
    validateMobile(rule,value,callback){
      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)){
        callback();
      }else{
        callback("手机号码格式不正确!");
      }
    }

  }
}
</script>

<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 15px
}
/deep/.ant-form-explain{
  margin-bottom: 0px;
  font-size: 5px;
  position: absolute;
  line-height: 1;
}
</style>

